<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>弓友之家</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
    <style>
    	.camera{position: absolute; right: 23%; top: 7px;}
    	.mui-icon-camera{color: #ccc; font-size: 30px; position: absolute; right: 0; top: 0;}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">在线聊天</h1>
	</header>
	<div class="mui-content">
		<div class="chat-content">
			<div class="chat-list">
				
			</div>
		</div>
		<div class="message-box">
			<form>
				<input type="text" id="content" placeholder="" />
				<span class="camera" id="signimg">
					<i class="mui-icon mui-icon-camera"></i>
				</span>
				<button type="button" onclick="sendMsg()" >提交</button>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/mui.min.js" ></script>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="js/chatfile.js" ></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<script type="text/javascript" src="js/mui.zoom.js" ></script>
	<script type="text/javascript" src="js/mui.previewimage.js" ></script>
	<script src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
	<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
	<script type="text/javascript" charset="utf-8">
      	mui.init();
      	
      	var scrollT="";
      	var userid="";
      	var usertx="";
      	mui.ajax(H_SRC+'/amier/index/chat',{
			data:{
				token:token
			},
			dataType:'json',
			type:'post',
			timeout:10000,
			success:function(data){
				var dataurl=data.message;
				userid=data.user_info.id;
				usertx=data.user_info.touxiang;
				if(data.code==1){
					var html1="";
					for(var i=0;i<dataurl.length;i++){
						if(dataurl[i].uid==userid){
							html1+='<div class="chat-one mui-clearfix me"><dl class="mui-clearfix">';
							if(dataurl[i].touxiang==""||dataurl[i].touxiang==null){
								html1+='<dt><img src="images/defaultimg.jpg" data-preview-src="" data-preview-group="2"/></dt><dd>';
							}else{
								html1+='<dt><img src="'+H_SRC+''+dataurl[i].touxiang+'" data-preview-src="" data-preview-group="2"/></dt><dd>';
							}
							html1+='<div class="name">'+dataurl[i].nickname+'</div>';
							if(dataurl[i].message.substring(0,9)=="./upload/"){
								html1+='<div class="content"><img src="'+H_SRC+''+dataurl[i].message.substr(1)+'" width="100" data-preview-src="" data-preview-group="1" /></div>';
							}else{
								html1+='<div class="content">'+dataurl[i].message+'</div>';
							}
							html1+='<div class="time">'+dataurl[i].c_time+'</div>';
							html1+='</dd></dl></div>';
						}else{
							html1+='<div class="chat-one mui-clearfix"><dl class="mui-clearfix">';
							if(dataurl[i].touxiang==""||dataurl[i].touxiang==null){
								html1+='<dt><img src="images/defaultimg.jpg" data-preview-src="" data-preview-group="2"/></dt><dd>';
							}else{
								html1+='<dt><img src="'+H_SRC+''+dataurl[i].touxiang+'" data-preview-src="" data-preview-group="2"/></dt><dd>';
							}
							html1+='<div class="name">'+dataurl[i].nickname+'</div>';
							if(dataurl[i].message.substring(0,9)=="./upload/"){
								html1+='<div class="content"><img src="'+H_SRC+''+dataurl[i].message.substr(1)+'" width="100" data-preview-src="" data-preview-group="1" /></div>';
							}else{
								html1+='<div class="content">'+dataurl[i].message+'</div>';
							}
							html1+='<div class="time">'+dataurl[i].c_time+'</div>';
							html1+='</dd></dl></div>';
						}
					}  
					$(".chat-list").html(html1);  
					mui.previewImage();
					scrollT=$(".chat-list").find(".chat-one:last-child").offset().top;
      				$("html,body").scrollTop(scrollT);
				}
			},
			error:function(xhr,type,errorThrown){
//				alert(type);
			}
		}) 

    	 var goEasy = new GoEasy({
	        appkey: "BC-4d8038063241463684051cb3a9b2ffce"
	    });

	    function sendMsg(){
	    	if($("#content").val()==""){
	    		mui.toast("聊天内容不能为空。");
	    		return false;
	    	}
	        $.post(
	            H_SRC+'/amier/index/chat_write',
	            {"message":$("#content").val(), "id": userid,'token':token},
	            function(data){
	                if(data.code==1){
	                    goEasy.publish({
	                        channel: "120",
	                        message: $("#content").val()    //消息内容
	                    });
	                    $("#content").val("");
	                }else{
	                	mui.toast("消息发送失败")
	                }
	            }, "json"
	        )
	
	    }
	
	    goEasy.subscribe({
	        channel: "120",
	        onMessage: function (message) {
	            $.post(
	                H_SRC+"/amier/index/chat_read",
	                {"message":message.content,"token":token},
	                function(data){ 
	                	var dataurl=data.message;
	                	var html1="";
						for(var i=0;i<dataurl.length;i++){
							if(dataurl[i].uid==userid){
								html1+='<div class="chat-one mui-clearfix me"><dl class="mui-clearfix">';
								if(dataurl[i].touxiang==""||dataurl[i].touxiang==null){
									html1+='<dt><img src="images/defaultimg.jpg" data-preview-src="" data-preview-group="2"/></dt><dd>';
								}else{
									html1+='<dt><img src="'+H_SRC+''+dataurl[i].touxiang+'" data-preview-src="" data-preview-group="2"/></dt><dd>';
								}
								html1+='<div class="name">'+dataurl[i].nickname+'</div>';
								if(dataurl[i].message.substring(0,9)=="./upload/"){
									html1+='<div class="content"><img src="'+H_SRC+''+dataurl[i].message.substr(1)+'" width="100" data-preview-src="" data-preview-group="1" /></div>';
								}else{
									html1+='<div class="content">'+dataurl[i].message+'</div>';
								}
								html1+='<div class="time">'+dataurl[i].c_time+'</div>';
								html1+='</dd></dl></div>';
							}else{
								html1+='<div class="chat-one mui-clearfix"><dl class="mui-clearfix">';
								if(dataurl[i].touxiang==""||dataurl[i].touxiang==null){
									html1+='<dt><img src="images/defaultimg.jpg" data-preview-src="" data-preview-group="2"/></dt><dd>';
								}else{
									html1+='<dt><img src="'+H_SRC+''+dataurl[i].touxiang+'" data-preview-src="" data-preview-group="2"/></dt><dd>';
								}
								html1+='<div class="name">'+dataurl[i].nickname+'</div>';
								if(dataurl[i].message.substring(0,9)=="./upload/"){
									html1+='<div class="content"><img src="'+H_SRC+''+dataurl[i].message.substr(1)+'" width="100" data-preview-src="" data-preview-group="1" /></div>';
								}else{
									html1+='<div class="content">'+dataurl[i].message+'</div>';
								}
								html1+='<div class="time">'+dataurl[i].c_time+'</div>';
								html1+='</dd></dl></div>';
							}
						}
						$(".chat-list").append(html1);
						mui.previewImage();
						scrollT=$(".chat-list").find(".chat-one:last-child").offset().top+100;
  						$("html,body").scrollTop(scrollT)
	                }, 'json'
	           )
	        }
	    });
	</script>
</body>
</html>